<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>账号中心</title>
</head>
<body>
  <div class="body">
    <div class="window">
      <div class="left">
        <span class="title">大数据工具箱</span>
        <span class="subtitle">全方位获取第一手数据</span>
        <div class="backg">
          <div class="planet">
            <div class="r1"></div>
            <div class="r2"></div>
            <div class="r3"></div>
            <div class="r4"></div>
            <div class="r5"></div>
            <div class="r6"></div>
            <div class="r7"></div>
            <div class="r8"></div>
            <div class="shad"></div>
          </div>
          <div class="stars">
            <div class="s1"></div>
            <div class="s2"></div>
            <div class="s3"></div>
            <div class="s4"></div>
            <div class="s5"></div>
            <div class="s6"></div>
          </div>
          <div class="an">
            <div class="tank"></div>
            <div class="astro">
              <div class="helmet">
                <div class="glass">
                  <div class="shine"></div>
                </div>
              </div>
              <div class="dress">
                <div class="c">
                  <div class="btn1"></div>
                  <div class="btn2"></div>
                  <div class="btn3"></div>
                  <div class="btn4"></div>
                </div>
              </div>
              <div class="handl">
                <div class="handl1">
                  <div class="glovel">
                    <div class="thumbl"></div>
                    <div class="b2"></div>
                  </div>
                </div>
              </div>
              <div class="handr">
                <div class="handr1">
                  <div class="glover">
                    <div class="thumbr"></div>
                    <div class="b1"></div>
                  </div>
                </div>
              </div>
              <div class="legl">
                <div class="bootl1">
                  <div class="bootl2"></div>
                </div>
              </div>
              <div class="legr">
                <div class="bootr1">
                  <div class="bootr2"></div>
                </div>
              </div>
              <div class="pipe">
                <div class="pipe2">
                  <div class="pipe3"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="name">用户验证中心</div>
        
        <div class="container">
          <div class="tabs">
            <input type="radio" id="radio-1" name="tabs" checked onClick="onLoginRadioClick()"/>
            <label class="tab" for="radio-1">登录</label>
            <input type="radio" id="radio-2" name="tabs" onClick="onRegisterRadioClick()"/>
            <label class="tab" for="radio-2">注册</label>
            <span class="glider"></span>
          </div>
        </div>
  
        <div class="form-item">
          <label for="email" class="text">邮箱：</label>
          <input id="email" type="text" placeholder="请输入邮箱" name="email" class="input">
        </div>
  
        <div class="form-item">
          <label for="psw" class="text">密码：</label>
          <input id="psw" type="password" placeholder="请输入密码" name="psw" class="input">
        </div>
  
        <div class="form-item" id="psw_comfirm_div" style="display: none;">
          <label for="psw_comfirm" class="text">密码：</label>
          <input id="psw_comfirm" type="password" placeholder="请再次输入密码" name="psw_comfirm" class="input">
        </div>
  
        <div class="form-item">
          <label for="verifyCode" class="text">验证码：</label>
          <input id="verifyCode" type="text" placeholder="请输入验证码" name="verifyCode" class="input">
          <img id="verifyCodeImg" src="" alt="验证码" onClick="updateVerifyCodeImg()"/>
        </div>
  
        <div class="btns">
          <a href="/ui/reset.html">忘记密码</a>
          <button class="login" onClick="login()">
            <svg id="loading-svg" style="display: none;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="currentColor" d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32m0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32m448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32m-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32M195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0m-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z"></path></svg>
            <span id="action-btn">登录</span>  
          </button>
        </div>
          
      </div>
    </div>
  </div>

  <!-- Message弹窗 -->
  <div class="toast__container">
    <div id="message-box" class="toast__cell">
      <!-- <div class="toast toast--yellow add-margin">
        <div class="toast__icon">
          <svg t="1705721003826" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2615" width="16" height="16"><path d="M531.072 345.728a42.666667 42.666667 0 0 1 42.666667 42.666667v170.666666a42.666667 42.666667 0 0 1-85.333334 0v-170.666666a42.666667 42.666667 0 0 1 42.666667-42.666667z m-30.165333 311.168a42.624 42.624 0 1 1 60.330666 60.330667 42.624 42.624 0 1 1-60.330666-60.330667zM531.072 170.666667c-14.890667 0-28.672 7.765333-36.437333 20.437333l-360.96 602.581333a42.624 42.624 0 0 0 36.010666 64h722.304a42.666667 42.666667 0 0 0 36.821334-63.402666L567.552 191.189333A42.666667 42.666667 0 0 0 531.072 170.666667z m0-85.333334c44.757333 0 86.229333 23.381333 109.568 61.824l361.728 603.904a128 128 0 0 1-109.909333 192H169.216a128 128 0 0 1-109.098667-192.597333l361.386667-603.306667A128.128 128.128 0 0 1 531.072 85.333333z" fill="#ffffff" p-id="2616"></path></svg>
        </div>
        <div class="toast__content">
          <p class="toast__type">Success</p>
          <p class="toast__message">
            Anyone with access can view your invited visitors.
          </p>
        </div>
        <div class="toast__close">
          <svg
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 15.642 15.642"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            enable-background="new 0 0 15.642 15.642"
          >
            <path
              fill-rule="evenodd"
              d="M8.882,7.821l6.541-6.541c0.293-0.293,0.293-0.768,0-1.061  c-0.293-0.293-0.768-0.293-1.061,0L7.821,6.76L1.28,0.22c-0.293-0.293-0.768-0.293-1.061,0c-0.293,0.293-0.293,0.768,0,1.061  l6.541,6.541L0.22,14.362c-0.293,0.293-0.293,0.768,0,1.061c0.147,0.146,0.338,0.22,0.53,0.22s0.384-0.073,0.53-0.22l6.541-6.541  l6.541,6.541c0.147,0.146,0.338,0.22,0.53,0.22c0.192,0,0.384-0.073,0.53-0.22c0.293-0.293,0.293-0.768,0-1.061L8.882,7.821z"
            ></path>
          </svg>
        </div>
      </div> -->
    </div>
  </div>
</body>

<!-- 加密函数 -->
<script type="text/javascript" src="/ui/crypto-js.min.js"></script>

<!-- 常用函数 -->
<script type="text/javascript">
/**
 * 解析路径query参数
 */
function parseQuery(url) {
  const q = {};
  url.replace(/([^?&=]+)=([^&]+)/g, (_, k, v) => (q[k] = v));
  return q;
}

/**
 * 修复safari 100vh bug
 */
function safariHacks() {
  let windowsVH = window.innerHeight / 100;
  document.querySelector('body').style.setProperty('--vh', windowsVH + 'px');
  window.addEventListener('resize', function() {
    document.querySelector('body').style.setProperty('--vh', windowsVH + 'px');
  });
}
</script>

<script type="text/javascript">
/** 邮箱正则 */
const emailRegExp = /^[A-Za-zd0-9]+([-_.][A-Za-zd]+)*@([A-Za-zd0-9]+[-.])+[A-Za-zd0-9]{2,5}$/;
/** 密码6~20位字符；字母、数字及标点符号至少包含两种 */
const passwordRegExp = /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$).{6,20}$/; // /^[A-Za-zd0-9.-_*!@`+#$&]{6,20}$/;
/** 弹窗dom-box元素 */
const messageBox = document.getElementById('message-box');
/** url Query对象 */
const queryObject = parseQuery(window.location.search);
/** 操作类型 */
let cooperateType = queryObject.type === 'register' ? 'register' : 'login'; // 'login' | 'register'
/** 是否加载中 */
let loading = false;
const radioLoginDom = document.getElementById('radio-1');
const radioRegisterDom = document.getElementById('radio-2');
const pswComfirmDom = document.getElementById('psw_comfirm_div');
const verifyCodeDom = document.getElementById('verifyCode');
const actionBtnDom = document.getElementById('action-btn');
const loadingSvgDom = document.getElementById('loading-svg');
</script>

<script type="text/javascript">
safariHacks();
/** 当前选中重置 */
if (cooperateType==='register') {
  radioRegisterDom.setAttribute('checked', true);
  pswComfirmDom.style.display = 'flex';
  actionBtnDom.innerText = '注册';
}

/** 登录选项被点中事件 */
function onLoginRadioClick() {
  if (cooperateType === 'login') return;
  radioLoginDom.setAttribute('checked', true);
  pswComfirmDom.style.display = 'none';
  cooperateType = 'login';
  actionBtnDom.innerText = '登录';
}

/** 注册选项被点中事件 */
function onRegisterRadioClick() {
  if (cooperateType === 'register') return;
  radioRegisterDom.setAttribute('checked', true);
  pswComfirmDom.style.display = 'flex';
  cooperateType = 'register';
  actionBtnDom.innerText = '注册';
}

/** 刷新验证码 */
document.getElementById('verifyCodeImg').setAttribute('src', '/auth/verifyCode?timestamp=' + new Date().getTime()); 

/** 
 * 加密
 */
function encrypt(word, keyStr){
  keyStr = keyStr ? keyStr : 'abcdefgabcdefg12';
  var key  = CryptoJS.enc.Utf8.parse(keyStr);//Latin1 w8m31+Yy/Nw6thPsMpO5fg==
  var srcs = CryptoJS.enc.Utf8.parse(word);
  var encrypted = CryptoJS.AES.encrypt(srcs, key, {mode:CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7});
  return encrypted.toString();
}

/** 
 * 解密
 */
// function decrypt(word, keyStr){
//   keyStr = keyStr ? keyStr : 'abcdefgabcdefg12';
//   var key  = CryptoJS.enc.Utf8.parse(keyStr);//Latin1 w8m31+Yy/Nw6thPsMpO5fg==
//   var decrypt = CryptoJS.AES.decrypt(word, key, {mode:CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7});
//   return CryptoJS.enc.Utf8.stringify(decrypt).toString();
// }

/** 
 * 更新验证码
 */
function updateVerifyCodeImg() {
  document.getElementById('verifyCodeImg').setAttribute('src', '/auth/verifyCode?timestamp=' + new Date().getTime()); 
}

/**
 * 关闭弹窗
 */
function closeMessage(id) {
  document.getElementById(id)?.remove?.();
}

/** 
 * 拿到message Item的html
 */
function getMessageHtml(type, conetent, title="提示", duration=3000) {
  const svg = {
    'warning': '<svg t="1705721003826" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2615" width="16" height="16"><path d="M531.072 345.728a42.666667 42.666667 0 0 1 42.666667 42.666667v170.666666a42.666667 42.666667 0 0 1-85.333334 0v-170.666666a42.666667 42.666667 0 0 1 42.666667-42.666667z m-30.165333 311.168a42.624 42.624 0 1 1 60.330666 60.330667 42.624 42.624 0 1 1-60.330666-60.330667zM531.072 170.666667c-14.890667 0-28.672 7.765333-36.437333 20.437333l-360.96 602.581333a42.624 42.624 0 0 0 36.010666 64h722.304a42.666667 42.666667 0 0 0 36.821334-63.402666L567.552 191.189333A42.666667 42.666667 0 0 0 531.072 170.666667z m0-85.333334c44.757333 0 86.229333 23.381333 109.568 61.824l361.728 603.904a128 128 0 0 1-109.909333 192H169.216a128 128 0 0 1-109.098667-192.597333l361.386667-603.306667A128.128 128.128 0 0 1 531.072 85.333333z" fill="#ffffff" p-id="2616"></path></svg>',
    'error': '<svg t="1705722974990" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2314" width="16" height="16"><path d="M886.784 746.496q29.696 30.72 43.52 56.32t-4.608 58.368q-4.096 6.144-11.264 14.848t-14.848 16.896-15.36 14.848-12.8 9.728q-25.6 15.36-60.416 8.192t-62.464-34.816l-43.008-43.008-57.344-57.344-67.584-67.584-73.728-73.728-131.072 131.072q-60.416 60.416-98.304 99.328-38.912 38.912-77.312 48.128t-68.096-17.408l-7.168-7.168-11.264-11.264-11.264-11.264q-6.144-6.144-7.168-8.192-11.264-14.336-13.312-29.184t2.56-29.184 13.824-27.648 20.48-24.576q9.216-8.192 32.768-30.72l55.296-57.344q33.792-32.768 75.264-73.728t86.528-86.016q-49.152-49.152-93.696-93.184t-79.872-78.848-57.856-56.832-27.648-27.136q-26.624-26.624-27.136-52.736t17.92-52.736q8.192-10.24 23.552-24.064t21.504-17.92q30.72-20.48 55.296-17.92t49.152 28.16l31.744 31.744q23.552 23.552 58.368 57.344t78.336 76.288 90.624 88.576q38.912-38.912 76.288-75.776t69.632-69.12 58.368-57.856 43.52-43.008q24.576-23.552 53.248-31.232t55.296 12.8q1.024 1.024 6.656 5.12t11.264 9.216 10.752 9.728 7.168 5.632q27.648 26.624 27.136 57.856t-27.136 57.856q-18.432 18.432-45.568 46.08t-60.416 60.416-70.144 69.632l-77.824 77.824q37.888 36.864 74.24 72.192t67.584 66.048 56.32 56.32 41.472 41.984z" p-id="2315" fill="#ffffff"></path></svg>',
    'success': '<svg t="1705721612983" class="icon" viewBox="0 0 1479 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4244" width="16" height="16"><path d="M1401.287111 0L1479.111111 77.824 544.938667 1012.053333 0 467.114667l136.248889-136.248889 447.601778 291.896889L1401.287111 0z" fill="#ffffff" p-id="4245"></path></svg>',
  }[type];
  const className = {
    'warning': 'toast--yellow',
    'error': 'toast--red',
    'success': 'toast--green',
  }[type];
  const id = new Date().getTime() + Math.random().toString(36).substring(2);
  setTimeout(() => {
    document.getElementById(id)?.remove?.();
  }, duration);
  return `
<div id="${id}" class="toast ${className} add-margin">
  <div class="toast__icon">
    ${svg}
  </div>
  <div class="toast__content">
    <p class="toast__type">${title}</p>
    <p class="toast__message">
      ${conetent}
    </p>
  </div>
  <div class="toast__close" onClick="closeMessage('${id}')">
    <svg
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 15.642 15.642"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      enable-background="new 0 0 15.642 15.642"
    >
      <path
        fill-rule="evenodd"
        d="M8.882,7.821l6.541-6.541c0.293-0.293,0.293-0.768,0-1.061  c-0.293-0.293-0.768-0.293-1.061,0L7.821,6.76L1.28,0.22c-0.293-0.293-0.768-0.293-1.061,0c-0.293,0.293-0.293,0.768,0,1.061  l6.541,6.541L0.22,14.362c-0.293,0.293-0.293,0.768,0,1.061c0.147,0.146,0.338,0.22,0.53,0.22s0.384-0.073,0.53-0.22l6.541-6.541  l6.541,6.541c0.147,0.146,0.338,0.22,0.53,0.22c0.192,0,0.384-0.073,0.53-0.22c0.293-0.293,0.293-0.768,0-1.061L8.882,7.821z"
      ></path>
    </svg>
  </div>
</div>
  `
}

/**
 * 弹窗
 */
const Message = {
  warning(text) {
    messageBox.innerHTML =  getMessageHtml('warning', text, '警告提示') + messageBox.innerHTML;
  },
  error(text) {
    messageBox.innerHTML =  getMessageHtml('error', text, '错误提示') + messageBox.innerHTML;
  },
  success(text) {
    messageBox.innerHTML =  getMessageHtml('success', text, '提示') + messageBox.innerHTML;
  },
}

/** 
 * 登录
 */
async function login() {
  if (loading) return Message.warning('请勿重复点击');
  const email = document.getElementById('email').value;
  const psw = document.getElementById('psw').value;
  const psw_comfirm = document.getElementById('psw_comfirm')?.value;
  const verifyCode = verifyCodeDom.value;
  /**
   * 表单校验
   */
  if (!email) return Message.warning('请输入邮箱');
  if (!emailRegExp.test(email)) return Message.warning('请输入正确的邮箱格式');
  if (!psw) return Message.warning('请输入密码');
  if (!passwordRegExp.test(psw)) return Message.warning('密码格式：6~20位字符；字母、数字及标点符号至少包含两种');
  if (cooperateType==='register') {
    if (!psw_comfirm) return Message.warning('请再次输入密码');
    if (psw !== psw_comfirm) return Message.warning('两次密码不一致');
  }
  if (!verifyCode) return Message.warning('请输入验证码');
  if (verifyCode.length!==4) return Message.warning('验证码长度不正确');

  /**
   * 发送请求
   */
  loading = true;
  loadingSvgDom.style.display = 'block';
  let response;
  try {
    response = await fetch(cooperateType==='login' ? '/auth/login' : '/user', {
      method: 'POST',
      headers: {
        'Content-Type': "application/json"
      },
      body: JSON.stringify({
        email,
        psw: encrypt(psw),
        verifyCode,
      })
    })
  } catch(error) {
    Message.error(error);
  }
  loading = false;
  loadingSvgDom.style.display = 'none';
  if (!response.ok) return Message.error(`${cooperateType==='login' ? '登录': '注册'}失败${response.statusText}`);
  const res = await response.json();
  if (res.success) {
    Message.success(`${cooperateType==='login' ? '登录': '注册'}成功`);

    if (cooperateType==='login') {
      /**
       * 登录成功后跳转连接
       */
      if (queryObject.backUrl) window.location.href = queryObject.backUrl;
    } else {
      /**
       * 注册成功后//TODO
       */
    }
  } else if (res.success === false) {
    updateVerifyCodeImg();
    verifyCodeDom.value = '';
    if (res.msg) Message.error(res.msg);
  } else {
    // 异常情况
  }
}
</script>

<!-- 弹窗 -->
<style>
.toast__container {
  position: absolute;
  right: 20px;
  top: 10px;
  z-index: 100;
}

.toast__cell{
  display:inline-block;
}

.add-margin{
  margin-top:10px;
}

.toast__svg{
  fill:#fff;
}

.toast {
  text-align:left;
    padding: 10px 0;
    background-color:#fff;
    border-radius:4px;
    max-width: 600px;
    min-width: 300px;
    top: 0px;
    position:relative;
    box-shadow: 1px 7px 14px -5px rgba(0,0,0,0.2);
}


.toast:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
  border-top-left-radius:4px;
  border-bottom-left-radius: 4px;

}

.toast__icon{
  position:absolute;
  top:50%;
  left:22px;
  transform:translateY(-50%);
  padding: 7px;
  border-radius:50%;
  display:inline-block;
  font-size: 14px;
}

.toast__type {
  color: #3e3e3e;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 4px;
}

.toast__message {
    font-size: 14px;
    margin-top: 0;
  margin-bottom: 0;
    color: #878787;
}

.toast__content{
  padding-left:70px;
  padding-right:60px;
}

.toast__close {
    position: absolute;
    right: 22px;
    top: 50%;
    width: 14px;
    cursor:pointer;
    height: 14px;
  fill:#878787;
    transform: translateY(-50%);
}

.toast--green .toast__icon{
  background-color:#2BDE3F;
}

.toast--green:before{
  background-color:#2BDE3F;
}

.toast--blue .toast__icon{
  background-color:#1D72F3;
}

.toast--blue:before{
  background-color:#1D72F3;
}
.toast--red .toast__icon{
  background-color:#d81e06;
}

.toast--red:before{
  background-color:#d81e06;;
}
.toast--yellow .toast__icon{
  background-color:#FFC007;
}

.toast--yellow:before{
  background-color:#FFC007;
}
</style>

<style>
:root {
	--primary-color: #185ee0;
	--secondary-color: #e6eef9;
}
*,
*:after,
*:before {
	box-sizing: border-box;
}
.container {
	display: flex;
	align-items: center;
	justify-content: center;
}
.tabs {
	display: flex;
	position: relative;
	background-color: #fff;
	box-shadow: 0 0 1px 0 rgba(#185ee0, 0.15), 0 6px 12px 0 rgba(#185ee0, 0.15);
	padding: 8px 10px;
	border-radius: 99px;
}
.tabs * {
  z-index: 2;
}
input[type="radio"] {
	display: none;
}

.tab {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 30px;
	width: 120px;
	font-size: 1.25rem;
	font-weight: 500;
	border-radius: 99px;
	cursor: pointer;
	transition: color 0.15s ease-in;
}

input[type="radio"]:checked + label {
  color: var(--primary-color);
}
input[type="radio"]:checked + label > .notification {
  background-color: var(--primary-color);
  color: #fff;
}

input[id="radio-1"]:checked ~ .glider {
  transform: translateX(0);
}

input[id="radio-2"]:checked ~ .glider {
  transform: translateX(100%);
}

input[id="radio-3"]:checked ~ .glider {
  transform: translateX(200%);
}

.glider {
	position: absolute;
	display: flex;
	height: 30px;
	width: 120px;
	background-color: var(--secondary-color);
	z-index: 1;
	border-radius: 99px;
	transition: 0.25s ease-out;
}

</style>
<style>
body {
  padding: 0;
  margin: 0;
  width: 100vw;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
}
/* 定义旋转动画 */
@keyframes rotating {
  0% { transform: rotate(0deg); } /* 初始状态为不旋转 */
  100% { transform: rotate(360deg); } /* 结束状态为完全旋转一周（360度）*/
}
#loading-svg {
  color: white;
  width: 16px;
  font-size: 40px;
  animation: rotating 2s linear infinite;
}
.window {
  width: 640px;
  height: 420px;
  border-radius: 10px;
  z-index: 6;
  display: flex;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.window .left, .window .right {
  flex-basis: 50%;
  flex-shrink: 0;
}
.window .left {
  position: relative;
  background-color: #3161812b;
  border-radius: 10px 0 0 10px;
  color: white;
  text-align: center;
}
.window .left .title {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 10%;
  font-size: 28px;
  display: block;
  font-weight: 700;
  font-style: oblique;
  text-shadow: 1px 3px 3px #513c3c;
}
.window .left .subtitle {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 22%;
  font-size: 20px;
  display: block;
}
.window .right {
  background-color: rgba(255, 255, 255, .95);
  border-radius: 0 10px 10px 0;
  color: #7f7f7f;
  text-align: center;
}
.window .right .name {
  font-size: 32px;
  margin-top: 30px;
  margin-bottom: 16px;
  color: #df7d4e;
  font-weight: 700;
}

.window .right .form-item {
  margin: 14px 20px;
  display: flex;
  font-size: 16px;
  align-items: center;
}
.window .right .form-item label {
  display: inline-block;
  width: 4em;
  flex-shrink: 0;
  color: #7f7f7f;
  text-align: right;
}
.window .right .form-item input {
  flex: 1;
  line-height: 1.8em;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  width: 100px;
}
.window .right .form-item input::placeholder {
  padding-left: 0.3em;
}
.window .right .form-item input:hover {
  box-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);
  border-color: rgb(22, 119, 255);
}
.window .right .form-item img {
  width: 100px;
  height: 40px;
  flex-shrink: 0;
}
#verifyCode {
  width: 50px;
}
#verifyCodeImg {
  cursor: pointer;
  border-radius: 6px;
  box-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);
  margin-left: 8px;
}
.window .right .btns {
  margin-top: 20px;
}
.window .right .btns a {
  color: #df7d4e;
}
.window .right .btns .login {
  margin-left: 30px;
  background-color: #085379;
  border: 0 solid transparent;
  border-radius: 6px;
  padding: 6px 0;
  width: 90px;
  font-size: 14px;
  color: white;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.window .right .btns .login #action-btn {
  margin-left: 4px;
}
</style>
<style>
.body{
  background-color: #004466;
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
}
.backg{
  position:absolute;
  bottom: 0;
  height:320px;
  width:320px;
  border-radius:50%;
  background-color:rgba(0,0,0,0.1);
  transform:scale(0.56);
}
.planet{
  height:150px;
  width:150px;
  border-radius: 50%;
  position: relative;
  background-color: #ff9933;
  top:45px;
  left:155px;
}
.r1{
  background-color: #ffbf80;
  height:16px;
  width:80px;
  border-radius:10px;
  position: relative;
  top:40px;
  left:63px;
}
.r2{
  background-color: #ffbf80;
  height: 15px;
  width:66px;
  border-radius:6.5px;
  position: relative;
  top:54px;
  left:84px;
}
.r3{
  background-color: #ffbf80;
  height:20px;
  width:87px;
  border-radius: 15px;
  position: relative;
  top:52px;
  left:36px;
}
.r4{
  background-color: #ffbf80;
  height:16px;
  width:60px;
  border-radius:11px;
  position: relative;
  top:48px;
  left:8px;
}
.r5{
  background-color: rgba(204, 102, 0,0.3);
  height:15px;
  width:40px;
  border-radius:7.5px;
  position: relative;
  bottom:50px;
  left:40px;
}
.r6{
  background-color: rgba(204, 102, 0,0.3);
  height:15px;
  width:60px;
  border-radius:11px;
  position: relative;
  bottom:25px;
  left:10px;
}
.r7{
  background-color: rgba(204, 102, 0,0.3);
  height:15px;
  width:35px;
  border-radius:7.5px;
  position: relative;
  top:14px;
  left:96px;
}
.r8{
  background-color: rgba(255,255,255,0.4);
  height:12px;
  width:30px;
  border-radius:7.5px;
  position: relative;
  top:-8px;
  left:20px;
}
.shad{
  background-color: transparent;
  box-shadow: 15px 15px rgba(204, 102, 0,0.3);
  position: relative;
  height:150px;
  width:150px;
  border-radius: 50%;
  bottom:139px;
  right:15px;
}
.astro{
  position: relative;
  left:131px;
  bottom: 250px;
  transform: rotate(-30deg);

}
.an{
  animation-name: flo;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  position: relative;
  bottom: 80px;
  left:20px;

}
@keyframes flo{
  50%{
    transform: translateY(30px);
  }
}
.tank{
  background-color: #a6a6a6;
  height:120px;
  width:120px;
  border-radius: 10px;
  position: relative;
  left:95px;
  top:50px;
  transform: rotate(-30deg);
}
.helmet{
  background-color: white;
  height:93px;
  width:100px;
  border-radius:45%;
  position: relative;
  left:20px;
  z-index: 5;
}
.glass{
  background-color: #666666;
  height:60px;
  width:80px;
  border-top-left-radius:60%;
  border-top-right-radius:60%;
  border-bottom-left-radius:40%;
  border-bottom-right-radius:40%;
  position: relative;
  left:10px;
  top:7px;
}
.shine{
  background-color: rgba(166, 166, 166,0.7);
  height:15px;
  width:15px;
  border-radius: 50%;
  position: relative;
  left:10px;
  top:15px;
}
.dress{
  background-color:#f2f2f2;
  height:100px;
  width: 100px;
  border-radius: 10%; 
  position: relative;
  bottom:5px;
  left:20px;

}
.handr{
  height: 26px;
  width:75px;
  background-color: #f2f2f2;
  border-radius:40px;
  position: relative;
  bottom:138px;
  left:95px;
  transform: rotate(-20deg);
}
.handl{
  height: 26px;
  width:75px;
  background-color: #f2f2f2;
  border-radius:40px;
  position: relative;
  bottom:111px;
  right:29px;
  transform: rotate(20deg);
}
.handr1{
  height: 26px;
  width:57px;
  background-color: #f2f2f2;
  border-radius:26px;
  position: relative;
  bottom: 18px;
  left:35px;
  transform: rotate(90deg);
}
.handl1{
  height: 26px;
  width:57px;
  background-color: #f2f2f2;
  border-radius:26px;
  position: relative;
  bottom: 17px;
  right:17px;
  transform: rotate(-90deg);
}
.glover{
  height:28px;
  width:26px;
  background-color: white;
  border-top-left-radius:50%; 
  border-top-right-radius:50%;
  transform: rotate(-90deg);
  position: relative;
  bottom: 1px;
  right:16px;
}
.glovel{
  height:28px;
  width:26px;
  background-color: white;
  border-top-left-radius:50%; 
  border-top-right-radius:50%;
  transform: rotate(90deg);
  position: relative;
  bottom: 1px;
  left:42px;
}
.thumbr{
  height: 10px;
  width:10px;
  border-radius: 50%;
  background-color: white;
  position: relative;
  right:7px;
  top:19px;
}
.thumbl{
  height: 10px;
  width:10px;
  border-radius: 50%;
  background-color: white;
  position: relative;
  left:21px;
  top:19px;
}
.b1{
  background-color: tomato;
  width:28px;
  height:5.5px;
  border-radius:13px;
  position: relative;
  top:18px;
  right: 1px;
}
.b2{
  background-color: tomato;
  width:28px;
  height:5.5px;
  border-radius:13px;
  position: relative;
  top:18px;
  right: 1px;
}
.c{
  background-color: white;
  width:55px;
  height:30px;
  border-radius:8px;
  position: relative;
  top:25px;
  left:23px;
}
.btn1{
  height:12px;
  width: 12px;
  border-radius: 50%;
  background-color: #4775ff;
  position: relative;
  left:5px;
  top:10px;
}
.btn2{
  height:12px;
  width: 12px;
  border-radius: 50%;
  background-color: #ffd147;
  position: relative;
  left:21px;
  bottom:2px;
}
.btn3{
  height:12px;
  width: 12px;
  border-radius: 50%;
  background-color: tomato;
  position: relative;
  bottom:14px;
  left:38px;
}
.btn4{
  height:20px;
  width:20px;
  border-radius: 50%;
  background-color: #a6a6a6;
  position: relative;
  left:19px;
  top:4px;
}

.legl{
  height:100px;
  width:40px;
  background-color: #f2f2f2;
  position: relative;
  bottom: 68px;
  left:5px;
  transform: rotate(20deg);
}
.legr{
  height:100px;
  width:40px;
  background-color: #f2f2f2;
  position: relative;
  bottom: 168px;
  left:96px;
  transform: rotate(-20deg);
}
.bootl1{
  background-color: white;
  width: 43px;
  height:35px;
  border-top-left-radius: 50%;
  border-top-right-radius:50%;
  position: relative;
  top:65px;
  right:1.5px;
}
.bootr1{
  background-color: white;
  width: 43px;
  height:35px;
  border-top-left-radius: 50%;
  border-top-right-radius:50%;
  position: relative;
  top:65px;
  right:1.5px;
}
.bootl2{
  background-color: tomato;
  width:45px;
  height: 5px;
  border-radius:21px;
  position: relative;
  top:30px;
  right: 1.5px;
}
.bootr2{
  background-color: tomato;
  width:45px;
  height: 5px;
  border-radius:21px;
  position: relative;
  top:30px;
  right: 1.5px;
}
.pipe{
  background-color:  transparent;
  height:80px;
  width:80px;
  border:10px solid #4775ff;
  border-radius:40px 0px 0px 70px;
  border-right: none;
  transform: rotate(180deg);
  position: relative;
  bottom: 330px;
  left:130px;
}
.pipe2{
  background-color:  transparent;
  height:90px;
  width:42px;
  border:10px solid #4775ff;
  border-radius:40px 0px 0px 0px;
  border-right: none;
  transform: rotate(90deg);
  position: relative;
  border-bottom: none;
  left:67px;
  bottom:34px;

}
.pipe3{
  height:10px;
  width: 10px;
  background-color: #4775ff;
  position: relative;
  border-radius: 65%;
  bottom:10px;
  left:37px;
}
.s1,.s2,.s3,.s4,.s5,.s6{
  background-color: white;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  position: relative;
}
.s1{
  bottom:150px;
  left:200px;
}
.s2{
  top:130px;
  left:254px;
}
.s3{
  bottom:98px;
  left:65px;
}
.s4{
  top: 216px;
  left:249px;
}
.s5{
  top: 139px;
  left:100px;
}
.s6{
  top:60px;
  left:370px;
}
</style>


<style>
@media screen and (max-width: 500px) {
/* 
 * 手机样式
 */
.window {
  width: 85%;
}
.window .left {
  display: none;
}
.window .right {
  flex-basis: 100%;
  min-width: 280px;
  border-radius: 10px;
}
.tabs {
  transform: scale(0.6);
}
.tab {
  font-size: 30px;
}
.tab, .glider {
  height: 40px;
  width: 150px;
}
}
</style>
</html>